<template>
  <div class="detail-wrap">
    <div class="left-nav">
      <div class="nav-wrap">
        <img src="http://localhost:3000/download?fileId=597707f3853ad121c435b699" class="nav-logo">
        <ul class="nav-items">
          <li class="nav-item"
          v-for="navitem in navItems"
          @click="nav(navitem.to)"
          :class="{active: currentRouteName===navitem.to.name}">
            {{navitem.menuText}}
          </li>
        </ul>
      </div>
    </div>
    <div class="right-content">
      <router-view></router-view>
    </div>
  </div>
</template>
<script>
  export default{
    data () {
      return {
        navItems: [{
          menuText: '日期',
          to: {
            name: 'publish',
            params: {
              category: 'publish'
            }
          }
        }, {
          menuText: '计数器',
          to: {
            name: 'prediction',
            params: {
              category: 'prediction'
            }
          }
        }, {
          menuText: '文件上传',
          to: {
            name: 'uploadfile',
            params: {
              category: 'uploadfile'
            }
          }
        }, {
          menuText: '自定义滚动条',
          to: {
            name: 'scroller',
            params: {
              category: 'scroller'
            }
          }
        }, {
          menuText: '自定义滚动条-Translate',
          to: {
            name: 'scrollerTrans',
            params: {
              category: 'scrollerTrans'
            }
          }
        }, {
          menuText: '分页表格',
          to: {
            name: 'paginationTable',
            params: {
              category: 'paginationTable'
            }
          }
        }]
      };
    },
    computed: {
      currentRouteName: function () {
        return this.$route.name;
      }
    },
    methods: {
      nav (to) {
        this.$router.push(to);
      }
    },
    mounted: function () {
    }
  };
</script>
<style scoped>
  .detail-wrap{
    display: flex;
    width: 1200px;
    padding: 20px 0;
    margin: 0 auto;
    text-align: left;
  }
  .detail-wrap>
  .left-nav{
    box-sizing: border-box;
    flex-basis: 200px;
  }

  .detail-wrap>
  .left-nav>
  .nav-wrap{
    padding: 20px 0;
    background-color: rgba(255, 255, 255, 1);
  }

  .detail-wrap>
  .left-nav>
  .nav-wrap>
  .nav-logo{
    display: block;
    width: 100px;
    height: 100px;
    margin: 0 auto;
  }

  .detail-wrap>
  .left-nav>
  .nav-wrap>
  .nav-items{
    margin-top: 20px;
  }

  .detail-wrap>
  .left-nav>
  .nav-wrap>
  .nav-items>
  li{
    padding: 10px 20px;
    cursor: pointer;
    user-select: none;
  }

  .detail-wrap>
  .left-nav>
  .nav-wrap>
  .nav-items>
  li:not(.active):hover{
    background-color: lightgray;
  }

  .detail-wrap>
  .left-nav>
  .nav-wrap>
  .nav-items>
  .active{
    background-color: rgba(0, 148, 170, 1);
  }

  .detail-wrap>
  .right-content{
    box-sizing: border-box;
    width: 980px;
    margin-left: 20px;
  }
</style>
